<!-- @format -->

<script setup lang="ts">
import { computed } from 'vue'
import { useToast } from 'wot-design-uni'
import { useNavHome } from '../composables/useNavHome'
import { useUserService } from '../composables/useUserService'
import { getCurrentPage } from '../utils/commonUtils'

const { isCustomHome, updateUserConf } = useUserService()
const { handleBack, handleBackHome } = useNavHome()
const toast = useToast()

const props = defineProps({
  pagePath: {
    type: String,
    default: '',
  },
})

const currentPagePath = computed(() => {
  return props.pagePath || getCurrentPage()
})

const toSelf = () => {
  uni.navigateTo({
    url: '/pages/repositories/repositories',
  })
}

const onBacktop = async () => {
  console.log('test 123 on backtop')
  await updateUserConf({ homePath: currentPagePath.value })
  toast.show('设置成功')
}
</script>

<template>
  <div class="flex-c">
    <the-icon-btn
      v-if="isCustomHome"
      size="36rpx"
      icon="user"
      bgColor="white"
      color="#333"
      @click="toSelf"
    />

    <wd-navbar-capsule
      v-if="!isCustomHome"
      @back="handleBack"
      @back-home="handleBackHome"
    />
    <the-icon
      v-if="!isCustomHome"
      class="the-btn c-blue"
      icon="backtop"
      @click="onBacktop"
    >
    </the-icon>
    <wd-toast />
  </div>
</template>

<style scoped>
.the-btn {
  margin-left: 16rpx;
  line-height: 1;

  font-size: 28rpx;
  border-radius: 40rpx;
  background-color: gray;
  color: white;
  padding: 16rpx;
}

.c-blue {
  background-color: blue;
  color: white;
}
.flex-c {
  display: flex;
  align-items: center;
}
</style>
